<template>
  <div class="cart-title">
    <div class="select-all" @click="setSelectedAllGoods()">
      <div
        class="iconfont input"
        :class="{ 'icon-fuxuankuang_xuanzhong4 checked': selectedAll, 'icon-fuxuankuang_weixuanzhong2': !selectedAll }"
      ></div>
    </div>
    <div class="title1">商品信息</div>
    <div class="title2">单价</div>
    <div class="title3">数量</div>
    <div class="title4">小计</div>
    <div class="title5">操作</div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['selectedAll'])
  },

  methods: {
    ...mapActions(['setSelectedAllGoods'])
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.cart-title {
  align-items: center;
  background-color: @bg-grey;
  border: 1px solid @border-grey;
  display: flex;
  font-size: 14px;
  display: flex;
  margin-bottom: 20px;
  padding: 12px 0px;
  .select-all {
    align-items: center;
    cursor: pointer;
    display: flex;
    width: 160px;
    padding-left: 20px;
    .input {
      color: @line-color-light;
      width: 18px;
      height: 18px;
      margin-right: 14px;
      &.checked {
        color: @color-warning;
      }
    }
  }
  .title1 {
    width: 300px;
    text-align: left;
  }
  .title2 {
    width: 180px;
    text-align: center;
  }
  .title3 {
    width: 170px;
    text-align: center;
  }
  .title4 {
    width: 150px;
    padding-right: 30px;
    text-align: right;
  }
  .title5 {
    margin-left: 30px;
  }
}
</style>
